<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 第二步：引入图标字体库font-awesome.min.css
    分享按钮的图片就是这个里面的， -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" media="all" />
  <title>手风琴效果</title>
</head>
<style>
*{
  margin: 0;
  padding: 0;
}
/* 第三步：开始写CSS样式 */
.social-btns {
  height: 90px;
  margin: 280px auto;
  font-size: 0;
  text-align: center;
}

/* 分享按钮公共css样式 */
.social-btns .btn {
  display: inline-block;
  background-color: #fff;
  width: 90px;
  height: 90px;
  line-height: 90px;
  margin: 0 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 28%;
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
  opacity: 0.99;
}
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
/* 所有属性都是用过渡动画 */
  transition: all 0.25s;
}
/* 几个分享按钮的CSS样式 */
/* 给每一个图标的a标签加一个before
给他一个背景旋转45度， */
.social-btns .btn:before {
  content: "";
  width: 120%;
  height: 120%;
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 90%;
  left: -110%;
}
/* 给每一个按钮的before加上自己的配色以及
给每一个按钮的字体图片加上颜色 */
.social-btns .btn.wechat:before {
  background-color: #25f136;
}
.social-btns .btn.wechat .fa {
  color: #25f136;
}
.social-btns .btn.weibo:before {
  background-color: #00aff0;
}
.social-btns .btn.weibo .fa {
  color: #00aff0;
}
.social-btns .btn.google:before {
  background-color: #dc4a38;
}
.social-btns .btn.google .fa {
  color: #dc4a38;
}
.social-btns .btn.instagram:before {
  background-color: #bf00ff;
}
.social-btns .btn.instagram .fa {
  color: #bf00ff;
}
.social-btns .btn.pinterest:before {
  background-color: #cc0000;
}
.social-btns .btn.pinterest .fa {
  color: #cc0000;
}

/* 当选中和移入图标后，改变图标的top和left
背景色上移动画效果 */
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
  top: -10%;
  left: -10%;
}

/* 默认图标缩小0.8倍 */
.social-btns .btn .fa {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

/* 选中和移入分享图标，图标还原的原来大小
做出图标变大的效果 */
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
  transform: scale(1);
}


.social-btns .btn .fa {
  font-size: 38px;
  vertical-align: middle;
}
</style>
<body>
    <!-- 第一步：写好五个分享按钮的html布局 -->
    <div class="social-btns">
        <a class="btn wechat" href="#">
            <i class="fa fa-wechat"></i>
        </a>
        <a class="btn weibo" href="#">
            <i class="fa fa-weibo"></i>
        </a>
        <a class="btn google" href="#">
            <i class="fa fa-google"></i>
        </a>
        <a class="btn instagram" href="#">
            <i class="fa fa-instagram"></i>
        </a>
        <a class="btn pinterest" href="#">
            <i class="fa fa-pinterest"></i>
        </a>
    </div>
</body>
</html>